<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-10-16 15:14:42
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-11-22 08:56:17
 * @FilePath: /nhw/src/components/Map/index.vue
-->
<template>
  <div class="map-container">
    <div id="map"></div>
    <div class="controls">
      <button class="cancel" @click="onCancel">取消</button>
      <button class="confirm" @click="onConfirm">确认</button>
    </div>
  </div>
</template>

<script>
import BaiduMap from "BaiduMap";
export default {
  name: "Map",

  data() {
    return {
      lng: null,
      lat: null,
      address: "",
    };
  },

  mounted() {
    this.createMap();
  },

  methods: {
    createMap() {
      const geolocation = new BaiduMap.Geolocation();
      geolocation.getCurrentPosition((r) => {
        const lng = r.point.lng;
        const lat = r.point.lat;
        if (geolocation.getStatus() == "0") {
          const map = new BaiduMap.Map("map"); // 创建地图实例
          const point = new BaiduMap.Point(lng, lat); // 创建点坐标
          map.centerAndZoom(point, 18);
          map.addControl(
            new BaiduMap.GeolocationControl({
              enableAutoLocation: true,
              showAddressBar: true,
              offset: new BaiduMap.Size(50, 100),
            })
          );

          map.enableScrollWheelZoom(true);
          this.setMarker(map, r.point);
          this.lat = lat;
          this.lng = lng;
          map.addEventListener("click", (e) => {
            this.setMarker(map, e.point);
            this.lng = e.point.lng;
            this.lat = e.point.lat;
          });
        } else {
          this.$toast("获取地图失败！");
        }
      });
    },
    setMarker(map, point) {
      map.clearOverlays(point);
      const mk = new BaiduMap.Marker(point);
      map.addOverlay(mk);
      map.panTo(point);
      this.getAddressByPoint(mk, point);
    },
    getAddressByPoint(marker, point) {
      const geocoder = new BaiduMap.Geocoder();
      geocoder.getLocation(point, (res) => {
        this.setLabel(marker, res.address);
        this.address = res.address;
      });
    },
    setLabel(marker, address) {
      const text = `<p class='a'>${address}</p>`;
      const label = new BaiduMap.Label(text, {
        offset: new BaiduMap.Size(-85, -120),
      });
      //设置label(标注的样式)
      label.setStyle({
        color: "black",
        fontSize: "14px",
        fontFamily: "微软雅黑",
        maxWidth: "none",
        border: "none",
        margin: "auto",
      });
      marker.setLabel(label);
    },
    emitPoint() {
      this.$emit("confirm", {
        lng: this.lng,
        lat: this.lat,
        address: this.address,
      });
    },
    onConfirm() {
      this.emitPoint();
    },
    onCancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@/style/var.less");
@import url("~@/style/mixin.less");
.map-container {
  height: 100%;
  position: relative;
  #map {
    height: 100%;
    width: 100%;
  }
  .controls {
    height: 10%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    .confirm {
      .clickableBtn();
      height: 78px;
      background: @primary;
      color: #fff;
      width: 20%;
      margin: 20px;
    }
    .cancel {
      .disabledBtn();
      height: 78px;
      width: 20%;
      margin: 20px;
    }
  }
}
</style>